<template>
    <div class='detailBox'>
        <div class="detailTop">
            <img src="https://heimahr.itheima.net/static/img/img.0615818f.jpeg" alt="">
            <div>
                <p><b>{{ user.username }}</b> <el-tag effect="dark" type="success" size="24">在职</el-tag></p>
                <p><span>最新工资基数</span><span>入职时间 {{ user.correctionTime }}</span><span>联系电话 {{ user.mobile }}</span></p>
                <p><span>本月不缴纳社保 <el-switch v-model="value2" class="ml-2"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" /></span>
                    &emsp; &emsp;

                    <span>本月不缴纳公积金 <el-switch v-model="value3" class="ml-2"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" /></span>
                </p>
            </div>
        </div>
        <div class="detailContentBox">
            <el-form :model="formInline" class="demo-form-inline" label-width="100">

                <el-form-item label="参保城市">
                    <el-select v-model="formInline.participatingInTheCity" placeholder="Activity zone" clearable
                        @change="(e) => getproto(e)">
                        <el-option :label="item.name" :value="item.id" v-for="item in citys" :key="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="社保类型">
                    <el-select v-model="formInline.socialSecurityType" placeholder="Activity zone" clearable>
                        <el-option label="首次开户" value="1" />
                        <el-option label="非首次开户" value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="户籍类型">
                    <el-select v-model="formInline.householdRegistration" placeholder="Activity zone" clearable>
                        <el-option label="本市城镇" value="shanghai" />
                        <el-option label="本市农村" value="beijing" />
                        <el-option label="外阜城镇" value="beijing" />
                        <el-option label="外阜农村" value="beijing" />
                    </el-select>
                </el-form-item>

                <el-form-item label="社保基数">
                    <el-input v-model="formInline.socialSecurityBase" placeholder="Approved by" clearable />
                    &emsp; (基数范围是3387 ~ 25401)
                </el-form-item>
                <el-form-item label="工伤比例">
                    <el-input v-model="formInline.industrialInjuryRatio" placeholder="Approved by" clearable />
                    &emsp; (比例范围是0.2% ~ 3%，推荐0.2%)
                </el-form-item>
                <el-form-item label="社保缴纳">
                    <span>个人</span> <el-input disabled :value="pepel"
                        style="width: 170px ; margin-left: 10px;margin-right: 15px;" v-model="formInline.user"
                        clearable />
                    <span>公司</span> <el-input disabled :value="group" style="width: 170px ; margin-left: 10px;"
                        v-model="formInline.user" clearable />
                </el-form-item>
                <el-table :data="payment_item" style="width: auto; margin-left: 100px;"
                    :header-cell-style="{ background: '#f5f6f8' }">
                    <el-table-column prop="name" label="缴费项目" width="150" />
                    <el-table-column prop="1" label="企业基数" width="150">
                        <span>{{ formInline.socialSecurityBase }}</span>
                    </el-table-column>

                    <el-table-column prop="scaleCompany" label="企业比例" width="180">
                        <template #default="scope">
                            <span>{{ scope.row.scaleCompany }}%</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="1" label="企业缴纳" width="150">
                        <template #default="scope">
                            <el-input
                                :value="(formInline.socialSecurityBase * (scope.row.scaleCompany * 0.01)).toFixed(2)"
                                disabled style="width: 120px;" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="1" label="个人基数" width="150" />
                    <el-table-column prop="scalePersonal" label="个人比例" width="150">
                        <template #default="scope">
                            <span>{{ scope.row.scalePersonal }}%</span>
                        </template>
                    </el-table-column>


                    <el-table-column prop="1" label="个人缴纳" width="150">
                        <template #default="scope">
                            <el-input
                                :value="(formInline.socialSecurityBase * (scope.row.scalePersonal * 0.01)).toFixed(2)"
                                disabled style="width: 120px;" />
                        </template>
                    </el-table-column>

                </el-table>
                <el-form-item label="社保备注" style="margin-top">
                    <textarea name="" id="" cols="57" rows="2"
                        style="border: 1px solid #ccc;border-radius: 4px;padding:10px;"
                        v-model="formInline.socialSecurityNotes"></textarea>
                </el-form-item>
                <el-form-item label="公积金城市">
                    <el-select v-model="formInline.providentFundCity" placeholder="Activity zone" clearable>
                        <el-option :label="item.name" :value="item.id" v-for="item in citys" :key="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="公积金基数">
                    <el-input v-model="formInline.providentFundBase" placeholder="Approved by" clearable />
                    &emsp; (基数范围是2273 ~ 25401)
                </el-form-item>
                <el-form-item label="企业比例">
                    <el-input v-model="formInline.enterpriseProportion" placeholder="Approved by" clearable />
                    &emsp; (比例范围是5% ~ 12%，推荐12%)
                </el-form-item>
                <el-form-item label="个人比例">
                    <el-input v-model="formInline.personalProportion" placeholder="Approved by" clearable />
                    &emsp; (比例范围是5% ~ 12%，推荐12%)
                </el-form-item>

                <el-form-item label="公积金缴纳">
                    <span>个人</span> <el-input style="width: 170px ; margin-left: 10px;margin-right: 15px;"
                        :value="formInline.providentFundBase * (formInline.personalProportion * 0.01)" clearable
                        disabled />
                    <span>公司</span> <el-input
                        :value="formInline.providentFundBase * (formInline.enterpriseProportion * 0.01)"
                        style="width: 170px ; margin-left: 10px;" disabled
                        v-model="formInline.enterpriseProvidentFundPayment" clearable />
                    &emsp; (为自动测算结果,可手动调整)
                </el-form-item>
                <el-form-item label="公积金备注">
                    <textarea name="" id="" cols="57" rows="2"
                        style="border: 1px solid #ccc;border-radius: 4px;padding:10px;"
                        v-model="formInline.providentFundNotes"></textarea>
                </el-form-item>
                <el-form-item>
                    <el-button color="#2752fb" style="border-radius: 2px" @click="onSubmit">保存</el-button>
                    <el-button style="border-radius: 2px" @click="router.go(-1)">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute,useRouter } from 'vue-router'
import { getdetail, getpayment, getcity, putsubmit } from '@/api/getSocial.api'
const value2 = ref(true)
const value3 = ref(true)
let route = useRoute()
let router = useRouter()
let user = ref({})
let payment_item = ref([])
onMounted(() => {
    getdata(route.query.id)
    getcitys()
})
let citys = ref([])
const formInline = ref({

})
const pepel = computed(() => {
    let res = payment_item.value.reduce((prev, item) => {
        prev += formInline.value.socialSecurityBase * (item.scalePersonal * 0.01)
        return prev
    }, 0)
    return res
})
const group = computed(() => {
    let res = payment_item.value.reduce((prev, item) => {
        prev += formInline.value.socialSecurityBase * (item.scaleCompany * 0.01)
        return prev
    }, 0)
    return res
})
const onSubmit = async () => {
    await putsubmit(JSON.stringify(formInline.value), route.query.data).then((res) => {
        if (res.data.message == '执行成功') {
            ElMessage({
                message: res.data.message,
                type: 'success',
            })
        }
    })
}

const getdata = async (id) => {
    await getdetail(id).then((res) => {
        if (res.data.code == 10000) {
            user.value = res.data.data.user
            formInline.value = res.data.data.userSocialSecurity
            getproto(formInline.value.participatingInTheCityId)
        }
    })
}

const getcitys = async () => {
    await getcity().then((res) => {
        if (res.data.message == '执行成功') {
            citys.value = res.data.data
        }
    })
}

const getproto = async (e) => {
    await getpayment(e).then((res) => {
        if (res.data.message == '执行成功') {
            payment_item.value = res.data.data
        }
    })
}
</script>


<style scoped>
.detailBox {
    width: 100%;
    height: auto;
}

.detailTop {
    width: 100%;
    height: 153px;
    background-color: white;
    box-sizing: border-box;
    padding: 15px;
    display: flex;
    align-items: center;
}

.detailTop img {
    width: 100px;
    height: 100px;
    box-shadow: 1px 2px 4px #ccc;
    border-radius: 50%;
    margin-right: 40px;
}

.detailTop p {
    width: 495px;
    height: 18px;
    margin: 16px 0;
}

.detailTop p:nth-child(2) {
    display: flex;
    justify-content: space-between
}

.detailContentBox {
    width: 100%;
    margin: 15px 0;
    box-sizing: border-box;
    padding: 15px;
    background-color: white;
}

.el-form {
    width: 100%;

}

.el-form label {
    color: #606266;
    font-size: 14px;
    font-size: 700
}

.demo-form-inline .el-input {
    --el-input-width: 426px;

}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>
